<html>

<head>
    <meta charset='utf-8' />
    <title>Volume Rendering - Texture 3D</title>
    <meta name='apple-mobile-web-app-capable' content='yes' />
    <meta name='full-screen' content='true' />
    <meta name='screen-orientation' content='portrait' />
    <meta name='x5-fullscreen' content='true' />
    <meta name='360-fullscreen' content='true' />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
        :root {
            color-scheme: light dark;
        }

        html,
        body {
            margin: 0;
            /* remove default margin */
            height: 100%;
            /* make body fill the browser window */
            display: flex;
            place-content: center center;
        }
    </style>
</head>

<body>
    <div>
        <p id="description" style="width: 600px;">
            This example shows how to render volumes with WebGPU using a 3D
            texture. It demonstrates simple direct volume rendering for photometric content
            through ray marching in a fragment shader, where a full-screen triangle
            determines the color from ray start and step size values as set in the vertex
            shader. This implementation employs data from the BrainWeb Simulated Brain
            Database, with decompression streams, to save disk space and network traffic.

            The original raw data is generated using
            [the BrainWeb Simulated Brain Database](https://brainweb.bic.mni.mcgill.ca/brainweb/)
            before processing in
            [a custom Python
            script](https://github.com/webgpu/webgpu-samples/tree/main/public/assets/img/volume/t1_icbm_normal_1mm_pn0_rf0.py).
        </p>
        <canvas id="webgpu" style="width: 600px; height: 600px;"></canvas>
    </div>

    <script type="module" src="./index.ts"></script>
</body>

</html>